<template>
    <el-date-picker
        :type="type"
        :editable="false"
        :readonly="readonly"
        :disabled="disabled"
        :clearable="clearable"
        placeholder="选择日期"
        start-placeholder="开始日期"
        range-separator="-"
        end-placeholder="结束日期"
        :format="format"
        :value-format="valueFormat"
        :picker-options="pickerOptions"
        v-model="actualValue"
    ></el-date-picker>
</template>

<script>
export default {
    props:{
        value: {
            type: [String, Date, Array],
            required: false
        },
        /* year/month/date/dates/week/datetime/datetimerange/daterange/monthrange */
        type: {
            type: String,
            default: "datetimerange"
        },
        readonly: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        clearable: {
            type: Boolean,
            default: true
        },
        format: {
            type: String,
            default: "yyyy-MM-dd HH:mm:ss"
        },
        valueFormat:{
            type: String,
            default: "yyyy-MM-dd HH:mm:ss"
        }
    },
    watch:{
        value(newVal, oldVal) {
            if (typeof newVal === 'string') {
                this.actualValue = new Date(newVal)
            }else{
                this.actualValue = newVal;
            }
        },
        actualValue(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.$emit("input", newVal);
            }
        },
    },
    computed:{
        pickerOptions(){
            if(this.type === `daterange` || this.type === `datetimerange`){
                return this.Option1
            }else if(this.type === `date`|| this.type === `datetime`){
                return this.Option2
            }else{
                return {}
            }
        }
    },
    data(){
        return{
            actualValue: this.value,
            Option1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            },
            Option2: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, 
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, 
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }
                ]
            }
        }
    },
    created(){
    }
}
</script>
